<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="60">
    <div class="box" @click="whiteSpaceClick">
      <div class="item1" >
        <div>是否编辑：</div>
        <div class="edit">
          <el-switch v-model="editingRef" size="small" />
          <el-button @click.stop="draw"> 重新绘制</el-button>
        </div>
      </div>
      <div class="item1">
        <div class="key">最低高程:</div>
        <el-input v-model.lazy="bottom" :disabled="true" type="number" />
      </div>
      <div class="item2">
        <div class="key"></div>
        <div>
          <el-button @click.stop="flat">纯平</el-button>
          <el-button @click.stop="offset">偏移</el-button>
        </div>
      </div>
      <div class="item2" v-show="showSlider">
        <div class="key"></div>
        <div class="fuc">
          <el-slider v-model="offsetVal" @input="offsetChange"  :min="-10" :max="10" :step="0.1" :show-tooltip="true" style="width: 170px" />
        </div>
      </div>
      <div class="item1">
        <div class="key">柱体高度:</div>
        <el-input type="number" v-model="ceilling" placeholder="请输入高度" min="" />
      </div>

      <div class="item1">
        <div class="key">编辑模式:</div>
        <el-select v-model="analysisModeValue" placeholder="请选择">
          <el-option v-for="item in analysisMode" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="btn1">
        <el-button @click="submit"
          :disabled="!eSGeoExtrudedPolygonUFMS || eSGeoExtrudedPolygonUFMS.editing || !eSGeoExtrudedPolygonUFMS.points || !eSGeoExtrudedPolygonUFMS.points.length">创建</el-button>
      </div>
    </div>
  </Dialog>

</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import Dialog from "../../components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, computed, watch } from "vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import TooltipCom from "@/components/common/TooltipCom.vue";
import { ESGeoExtrudedPolygonUFMS } from "@/scripts/esobjs/ESGeoExtrudedPolygonUFMS";
import { getsceneObjNumfromSceneTree, processNum } from "@/scripts/utils";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 300);

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelser2SceneTreeWrapper = objm.modelser2SceneTreeWrapper;
const modelserManager = getProjectManager().modelserManager;

const editPolygon = modelserManager.editPolygon;


let eSGeoExtrudedPolygonUFMS: any = ref("");
let editingRef = ref(false);

const create = () => {
  eSGeoExtrudedPolygonUFMS.value = d.ad(
    objm.createSceneObject(ESGeoExtrudedPolygonUFMS) as ESGeoExtrudedPolygonUFMS
  );
  d.dispose(() => {
    eSGeoExtrudedPolygonUFMS.value.editing = false
    eSGeoExtrudedPolygonUFMS.value &&
      objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  });
  editingRef.value = true;
  eSGeoExtrudedPolygonUFMS.value.fillColor = [1, 0, 0, 0.5];
  eSGeoExtrudedPolygonUFMS.value.absoluteBottom = false

  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.pointsChanged.disposableOn((e: any) => {
      bottom.value = processNum(editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points))
      eSGeoExtrudedPolygonUFMS.value.ceilling = Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points);
    })
  );
  eSGeoExtrudedPolygonUFMS.value.dispose(eSGeoExtrudedPolygonUFMS.value.editingChanged.disposableOn((val: any) => {
    editingRef.value = val
  }))
  updateParam();
};

watch(editingRef, (val) => {
  if (!eSGeoExtrudedPolygonUFMS.value) return;
  eSGeoExtrudedPolygonUFMS.value.editing = val
})

const bottom = ref(0);

const ceilling = ref(10);
// 裁剪方式
const analysisMode = [
  {
    value: "1",
    label: "裁剪",
  },
  {
    value: "2",
    label: "压平",
  },
];
const analysisModeValue = ref(analysisMode[0].value);



// 重新绘制
const draw = () => {
  if (eSGeoExtrudedPolygonUFMS.value.editing) {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
  }
  eSGeoExtrudedPolygonUFMS.value.points = [];
  eSGeoExtrudedPolygonUFMS.value.editing = true;
};

// 纯平
const flat = () => {
  eSGeoExtrudedPolygonUFMS.value.points = eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number]) => [p[0], p[1], editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points)])
}

// 偏移值
const offsetVal = ref(0)
// 底部高程默认值
const bottomDefault = ref<any>([])

// 是否显示滑块
const showSlider = ref(false)

// 偏移
const offset = () => {
  offsetVal.value = 0
  bottomDefault.value = []
  showSlider.value = true
  bottomDefault.value = JSON.parse(JSON.stringify(eSGeoExtrudedPolygonUFMS.value.points))
}

// 偏移监听
const offsetChange = (val: number) => {
  eSGeoExtrudedPolygonUFMS.value.points = eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number],i: number) => [p[0], p[1], bottomDefault.value[i][2] + val])
}

// 点击空白
const whiteSpaceClick = () => {
  showSlider.value = false
}

const updateParam = () => {
  eSGeoExtrudedPolygonUFMS.value.operation = analysisModeValue.value as "1" | "2";
  eSGeoExtrudedPolygonUFMS.value.bottom = Number(bottom.value)
  eSGeoExtrudedPolygonUFMS.value.ceilling =
    Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points);
};

// 监听顶面高度模式和变化
watch([bottom, ceilling, analysisModeValue], () => {
  updateParam();
});

const currentDialog = ref(false);
// 提交
const submit = async () => {
  const treeItem = objm.createdTreeItem(modelser2SceneTreeWrapper);
  treeItem.sceneObject = eSGeoExtrudedPolygonUFMS.value;

  const name = "自由绘制"
  // @ts-ignore
  const num = getsceneObjNumfromSceneTree(treeItem.sceneObject.typeName, objm.modelser2SceneTreeWrapper);
  treeItem.name = `${name}(${num})`
  // @ts-ignore
  treeItem.sceneObject.fillColor = [0, 0, 1, 0.5];


  create();
};


onMounted(() => {
  create();
});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 8px;
}


.item2 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
}

.fuc {
  display: flex;
}


.btn1 {
  display: flex;
  justify-content: flex-end
    /* justify-content: space-between; */
}

.el-button {
  margin-left: 0px !important;
}

.edit {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>
